<template>
  <div class="notice">
    <h3>观演须知</h3>

    <div class="tips">
      <template v-for="(item, index) in guidelines" :key="index">
        <div class="tips-item">
          <div class="icon">
            <van-icon :name="item.icon" size="16"></van-icon>
          </div>
          <div class="tips-right">
            <div class="tips-title">{{ item.name }}</div>
            <div class="tips-content">{{ item.value }}</div>
          </div>
        </div>
      </template>

      <!-- 座位图 -->
      <div class="seat-wrapper" :class="{ collapsed: isCollapsed }">
        <div class="seatImage">
          <img :src="seatPlanURL" class="preview" />
        </div>
      </div>
      <div class="toggle-btn" @click="toggleContent">
        <span>{{ isCollapsed ? '展开更多' : '收起' }}</span>
      </div>

      <!-- 常见问题 -->
      <div class="faq">
        <div class="faq-title">常见问题</div>
        <ul class="faq-list">
          <li class="faq-item" v-for="faq in faqList" :key="faq.id">
            <div class="tag" @click="clickFaq(faq)">{{ faq.name }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { fetchTourSiteFaq } from '@/api/index.js'
import { ref, computed, toRefs, onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const showId = computed(() => route.query.showId)

const props = defineProps(['serviceNotes', 'seatPlanURL'])

const { serviceNotes, seatPlanURL } = toRefs(props)

// 观演须知
const guidelines = computed(() => {
  const service = serviceNotes.value.filter((service) => {
    return service.showInBanner === false
  })

  return service
})

const isCollapsed = ref(true)

const faqList = ref([])

onMounted(() => {
  getTourSiteFaq(showId.value)
})

// 切换内容显示状态
const toggleContent = () => {
  isCollapsed.value = !isCollapsed.value
}

const getTourSiteFaq = async (showId) => {
  try {
    const { statusCode, data } = await fetchTourSiteFaq(showId)

    if (statusCode === 200) {
      faqList.value = data
    }
  } catch (error) {
    console.log('获取常见问题失败', error)
  }
}

const emit = defineEmits(['showFaq'])
const clickFaq = (faq) => {
  // console.log(faq)
  emit('showFaq', faq)
}
</script>

<style scoped lang="scss">
.notice {
  z-index: 1;
  padding: 0 15px;
  margin-top: 15px;

  h3 {
    margin: 0;
    padding: 10px 0;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px;
  }

  .tips {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-direction: column;

    .tips-item {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      justify-content: flex-start;

      .icon {
      }

      .tips-right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 5px;

        .tips-title {
          color: #323038;
          font-size: 15px;
          font-weight: 500;
        }

        .tips-content {
          color: #95949d;
          font-size: 14px;
          font-weight: 500;
        }
      }
    }

    .seat-wrapper {
      position: relative;
      overflow: hidden;

      &.collapsed {
        max-height: 0px;
        overflow: hidden;
      }

      .seatImage {
        width: 100%;
        height: 100%;
        object-fit: cover;

        .preview {
          width: 100%;
          height: 100%;
        }
      }
    }

    .toggle-btn {
      color: #ff1d41;
      font-size: 14px;
      cursor: pointer;
      width: 100%;
      margin: 0 auto;
      text-align: center;
    }

    .faq {
      .faq-title {
        color: #323038;
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 20px;
      }

      .faq-list {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;

        .faq-item {
          .tag {
            background-color: #f6f6f7;
            font-size: 12px;
            padding: 10px 16px;
            border-radius: 20px;
          }
        }
      }
    }
  }
}
</style>
